Layers Magazine

Use CS4 integration to move this postcard design from Photoshop to InDesign.

This video requires Adobe Flash Player.

Like most things in design, you can make quite an impact by modifying how people perceive things. In this tutorial, we’re going to create a 3D effect using simple 2D art, demonstrating how effective a little perspective can be.

1 [CREATE NEW RGB DOCUMENT]
Choose File>New, select Basic RGB from the New Document Profile pop-up menu, and click OK. Open the Symbols panel (Window>Symbols), then click the flyout menu and choose Open Symbol Library>Grime Vector Pack.

2 [DRAG SYMBOL ONTO ARTBOARD]
Next, click-and-drag Grime Vector Pack 09 from the Grime Vector Pack panel onto the artboard. Go up to the Control panel and click the Break Link button. This will turn the art into a regular shape rather than a symbol instance. Open the Swatches panel (Window>Swatches) and choose a bright green color for the shape.

3 [DRAG SECOND SYMBOL ONTO ARTBOARD]
Go back to the Grime Vector Pack panel and click-and-drag Grime Vector Pack 10 onto the artboard. Once again, click the Break Link button to turn it into a regular shape. Then choose a red color for this shape in the Swatches panel.

4 [TURN SHAPES BACK INTO SYMBOLS]
At this point we have two splat shapes: a red one and a green one. With the Selection tool (V), take these shapes and turn them back into symbols by dragging them into the Symbols panel. In the Symbol Options dialog that appears, choose Graphic and give each symbol a name. This will also turn these existing shapes on the artboard into symbol instances.

5 [CHANGE PERSPECTIVE OF SYMBOL]
Select one of the shapes and choose Effect>3D>Rotate. This will allow you to rotate the object in 3D while still being 2D. In the 3D Rotate Options dialog that appears, you can grab the cube and rotate the object freely, or you can input the numbers manually for exact positioning (click the Preview checkbox to see your changes). To rotate the object on a specific axis, place your cursor where any two sides of the cube meet in the dialog. The colored lines correspond to a specific axis, as indicated on the right. As a final touch, set the Perspective to 100° to give it an exaggerated perspective that adds more interest.

6 [APPLY SAME ROTATION TO SECOND SYMBOL]
Repeat Step 5 for the other symbol to apply the same 3D rotation, then position them so they overlap each other, as shown here. If the perspective seems off, you can always modify the 3D settings of either symbol. To do this, select a symbol, open the Appearance panel (Window>Appearance), and click the 3D Rotate effect.

7 [ADD TEXT; CONVERT TO OUTLINES]
Select the Type tool (T) in the Toolbox. While you may use any word you like, we’ve chosen to be obvious and use the word SPLAT! We’re using a very bold font called Rockwell Extra Bold. Switch to the Selection tool, then go into the Swatches panel and choose a color that will go along with the red and green; we’re using blue. Now convert the text to outlines by choosing Type>Create Outlines.

8 [POSITION TEXT]
With the Selection tool, position this text over the 3D splats and resize to taste. Then, choose Effect>3D>Extrude & Bevel. What we need to do here is use the current 3D splats as a guide for the perspective. You can grab the cube and position the text in 3D. Notice we set the Perspective to 125° for a more exaggerated look. Also, set the Extrude Depth to 40 pt. Next, click the More Options button to reveal the lighting controls. Grab the light handle on the sphere and position it so it’s front and left of the sphere in relation to the text itself. Click OK.

9 [ROTATE LETTERS]
We have the text in 3D, but it needs something extra because it looks like it just slammed down on the floor. Because the 3D effect is a live effect, we can modify the original shapes of the text and it will be updated as we change them. Grab the Direct Selection tool (A) in the Toolbox and select any one of the letters. Then grab the Rotate tool (R) and give the letter a slight turn. The 3D effect will redraw based on the new position. Do this to a couple other letters, slightly varying the rotation.

10 [ADD SHADOWS]
Select the Pen tool (P) in the Toolbox and set the Fill color to black up in the Control panel. Draw some shapes at the bottom of the letters that conform to the contour somewhat, as these will be shadows. Once all the shapes are done, choose the Selection tool and Shift-click each shadow area to select them. Open the Transparency panel (Window>Transparency) and lower the Opacity to 50%. Now we need to put these shadow shapes behind the letters. Click on a letter with the Selection tool and choose Object>Arrange>Bring to Front.

11 [MAP ART]
Let’s go back to those colored splats we created earlier. We’re going to make it appear as if some of the color splashed up onto the letters. With the text still selected, open the Appearance panel and click on 3D Extrude & Bevel. In the 3D Extrude & Bevel Options dialog, click on the Map Art button to open the Map Art dialog. The current surface is indicated by a red outline on the art itself. To get to the front face of the letter P, toggle through the numbered surfaces at the top of the Map Art dialog until the red outline selects it.

12 [ADD SPLAT COLORS TO LETTERS]
With the P selected (the outline, not the solid), click the Symbol menu and find the splat symbols. Select the green one and it will apply to the letter. If the graphic comes in really big, click the Scale to Fit button at the bottom, then drag it toward the bottom of the letter. Make sure the Preview button is checked so you can see the result. Use the control handles on the bounding box to resize and rotate the symbol as necessary. Continue to add these splats to other letters and this will result in a cool splash effect on the text.

Final Image

Hey everyone! I am in the middle of a flight to San Diego to teach the Creative Suite Unleashed tour with Dave Cross tomorrow (Make sure you come if youre in the area!)- 35,000 feet up in the air at that. While i’m up here, I figured it’d be a good idea to let you guys know of a couple of things that I think would really interest you:

Humble Arts Foundation Open
Humble Arts Foundation is a not-for-profit organization that works to advance the careers of emerging fine art photographers by way of exhibition and publishing opportunities, limited-edition print sales, twice–annual artists grants, and educational programming.

Jon Feinstein sent an email over letting us know that there is an open call for women photographers for an upcoming exhibition! If you are a woman and would love to get your photography noticed, I’d definitely recommend clicking on this link to check out the cast call details for Humbles open call!. Let me know how you do!

onOne Software Releases Plug-In Suite 5
I keep very few third party plugins on my computer – onOne Software is one of those that AUTOMATICALLY gets installed in my machine as soon as I install Photoshop. To that, i’m really happy to announce that they have taken it to the next level announcing the Plug-In Suite 5! For me, its the ability to be able to get things done fast that is the biggest allure. From masking to framing to effects, using onOne just makes for creative and quick – two things that I think really help me out!

In fact, we believe in this software so much, all of us Photoshop Guys actually created a series of our favorite presets for NAPP members!

To see the latest from onOne Software on their newest Plug-In Suite 5 click on this link. Great job guys!!

SXSW Interactive Web Awards: Accepting Entries
The 13th Annual SXSW Interactive Web Awards is happening in Austin (now one of my fav cities.. thanks to buddies Christina and Dan), March 14, 2010. SXSW is just one of those things that can’t really be described in a short amount of words. It’s an experience. Check out the video below to see what’s it all about.

The Interactive Web Awards is a subsection of SXSW and it highlights some of the best websites and really stands as the cutting edge of web showcase. Right now they are accepting entries for the Interactive Awards through Dec 18. Have a great site. Know someone with a kick tail site? Make sure they know about this:

Click here to get more information on the SXSQ Interactive Web Awards

OK.. looks like its getting turbulent here. Have a great day everyone!

Corey experiments with a new 3D plug-in for Photoshop called 3D Invigorator. RC talks about the different collaboration tools available at Acrobat.com.

You can download each episode by subscribing to the podcast on iTunes.

var so = new SWFObject('http://media.kelbymediagroup.com/players/player.swf','mpl','500','300','7'); so.addParam('allowfullscreen','true'); // so.addVariable('type','rtmp'); so.addVariable('file','http://media.kelbymediagroup.com/switch/video/layers-tv-episode-112.mp4'); so.addVariable('plugins','hd-1'); so.addVariable('hd.file','http://media.kelbymediagroup.com/switch/video/layers-tv-episode-112-hd.mp4'); so.addVariable('hd.state','false'); so.addVariable('image','http://www.layersmagazine.com/images/layerstv-logo.jpg'); so.addVariable('height','300'); so.addVariable('width','500'); so.addVariable('autostart','false'); so.addVariable("backcolor","0x000000"); so.addVariable("frontcolor","0xF1F1F1"); so.addVariable("lightcolor","0xF88E21"); so.addVariable("quality","100"); so.write('player');

Thank you so much to iStockphoto for providing us with images to use for the show. Be sure to visit them for all of your image needs: iStockphoto

Have an idea for the show? Click on the Contact Us link below and send us an email. Be sure to select Layers TV from the drop down. We’d love to hear from you!

Contact Us

View past episodes of Layers TV

Corey experiments with a new 3D plug-in for Photoshop called 3D Invigorator. RC talks about the different collaboration tools available at Acrobat.com.

RC and Corey have decided that the weekly contest winner from Layers TV will be announced in RC’s blog post. Remember when you submit your answer in the contact form to choose Layers Blog from the drop-down menu. Be sure to check the front page post for the name of this week’s winner and tune in to this week’s episode to find out what the contest question and prizes are.

 

[If you’d like to download the files used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.]

Learning the Accordion

One of the most useful user interface constructs is the accordion panel. It allows you to stack various sections of your site and then expand and contract the sections when they’re clicked on. In this tutorial, we’ll create a basic animating accordion panel that can be used as the basis for a full Flash website.

1 [EXAMINE THE FILES]
Open the accordion folder (from the download files available at www.layersmagazine.com) and you should see two FLA files: The accordion.fla file is what you’ll need to open to start the tutorial, and the accordion_final.fla file is a finished version of the tutorial that you can use as a reference. There’s also another folder named gs, which contains an ActionScript animation library called TweenLite that we’ll use to do our animation.

2 [OPEN THE FLA]
Open the accordion.fla file in Flash CS4 (this tutorial will also work with Flash CS3 if you haven’t yet upgraded). On the Timeline, you’ll see two layers: The actions layer will hold all of our ActionScript 3.0 code for this project and the panels layer will contain all of the various sections for our site. The movie is 690 pixels wide and 355 pixels high with a frame rate of 30, and it’s set to publish for Flash Player 9, as we won’t be using any of the new Flash Player 10 features.

3 [DRAW A PANEL]
Select the first frame of the panels layer and select the Rectangle tool (R). In the Property inspector, remove the Stroke color (if there is one) and set the Fill color to #0066CC (blue). Drag out a rectangle on the Stage at any size, then in the Property inspector set the following: W(idth) 600; H(eight) 355; X 0; Y 0. (Note: Make sure the chain icon is “broken” next to Width and Height.) Control-click (PC: Right-click) on the rectangle and choose Convert to Symbol. In the dialog that appears, name it “panel1,” make sure that Movie Clip is the Type, and click OK.

4 [ADD A TEXT FIELD]
In the Property inspector, give the new movie clip an Instance name of “panel1.” Double-click on it with the Selection tool (V) to enter edit mode. Select the Text tool (T), set the Character Family to Myriad Pro (or another font—make sure it’s a clean, legible font, as it will be rotated 90°), enter Size (as desired), and Color (we chose white). Click on the Stage and enter the text, “Panel 1.” Switch to the Selection tool, open the Transform panel (Window>Transform), and set Rotate to 90°. Return to the Property inspector and set the type’s X property to 0 and Y to 9. Click on Scene 1 to return to the main Timeline.

5 [DUPLICATE THE PANEL]
Now we’ll duplicate the movie clip panel for each section of the site. In the Library panel, Control-click (PC: Right-click) on the panel1 movie clip and choose Duplicate. You’ll be prompted to give the new clip a name, so let’s call it “panel2.” Now drag an Instance of the panel2 movie clip onto the Stage, and in the Property inspector, position it at X 30 and Y 0. Give the clip an Instance name of “panel2.” (Obviously, if you were building a real site you could name the various clips based on what they contained.)

6 [MODIFY THE DUPLICATE PANEL]
Double-click on the panel2 movie clip to enter edit mode so you can customize this panel. With the Text tool, change the text to “Panel 2.” Then, select the rectangle and choose another color in the Property inspector. Go back out the main Timeline. Now follow the same steps to create two more panels. Offset the X property on each panel by 30 pixels—that means the third panel will have an X of 60 and the fourth will be X 90. Be sure to give each panel an Instance name, following the same convention as above.

7 [IMPORT TWEENLITE]
Select the first frame in the actions layer and open the Actions panel (Window>Actions). Enter the code shown here into the panel. These two lines of code import the TweenLite animation library so that we can use it. TweenLite is an ActionScript 3.0 library that makes animating with code extremely simple. All that’s required is a single line of code to create some really complex animations. There are other engines such as Tweener and gTween that would also work well for this tutorial. (Note: Make sure the gs folder is in the same folder as your FLA file.)

8 [SET LEFT AND RIGHT POSITIONS]
Add the code highlighted here into the Actions panel. In these four lines of code, we’re attaching some information to each of the panels that will help us when we need to animate them. The first property, lx, is the leftmost X position of the panel. The rx property is the X position for the panel when it’s on the right side of the movie. Notice how all of these values are offset by 30 pixels from one another. The ind property simply holds the index number of the panel.

9 [ADD CLICK EVENTS]
Now we need to set up the click events for each of the panels so that they can react when one of them is clicked. Add these next highlighted lines of code to the Actions panel. The first four lines sets up the click events for each panel. All of them will call a function named onClick that’s located at the bottom of the code block. When a panel is clicked, it will animate all of the panels to the correct position allowing the user to view the full contents of that panel.

10 [WHO WAS CLICKED?]
Since all of the panels will call the same function when they’re clicked on, we need to determine which one was clicked so we can animate the panels appropriately. We can easily get a reference to that clip by using the target property of the event object that gets sent to the function. Add this highlighted code into the Actions panel at the specified location to create a variable named “clicked,” which references the clip that was clicked on.

11 [LOOP THROUGH THE PANELS]
Now that we know which clip has been clicked on, we need to loop through all of the panels and animate them to the correct position. In ActionScript 3.0, the most common way to do this is by using a “for” loop. A counter variable is incremented each time the loop is run until it no longer satisfies the condition. Enter the highlighted code into the Actions panel at the specified location. Inside the loop we create a new variable named “mc” that references the panel clip based on the value of the loop counter i.

12 [ANIMATE THE PANELS]
Enter this highlighted code into the Actions panel at the location specified. First, we check whether the index of the current clip is less than or equal to the index of the clip that was clicked on. If it is, we need to animate it to the left. If not, it needs to be animated to the right. For each case, we’re using the TweenLite.to function to do the animation. The animation length is set to 0.5 seconds and we’re using an exponential ease-out effect. Both of these settings can be customized to change the feel of the animation (see Step 14).

13 [ADD CONTENT TO THE PANELS]
Test the movie by choosing Test Movie from the Control menu. Click on the various panels to see the nice animation effect. Now that the code is complete, you can start customizing the panels so that they contain actual content. Double-click on one of the panels to enter edit mode. Now you can start adding text, images, video, or anything else that you want on that particular panel. Check out the accordion_final.fla file to see an example of a finished panel.

14 [CUSTOMIZE TWEENLITE]
As mentioned in Step 12, you can change some of the values in the TweenLite function call to customize the animation effect. Try changing Expo.easeOut to Bounce.easeOut. This makes the panels bounce into place. Another interesting choice would be Elastic.easeOut, which gives it a springy, elastic effect. You can also adjust the length of the animation to achieve different results. To see the full list of customization options, check out the documentation for TweenLite at http://blog.greensock.com/tweenliteas3.

Make way, San Diego! Dave Cross and I are bringing our Creative Suite Unleashed Tour to California this Friday. In one day, he and I will talk about how to make the most out of using Illustrator, Indesign, Photoshop, Flash, and even a little bit of Dreamweaver thrown in there for good measure!

I’m a big fan of being able to maximize your use of all of the applications. These days its not enough to do just one thing. If you are a photographer, it’s becoming more and more important to leverage the web. If you are into Video, the advances in photography are making it more and more compelling for you to take a look at it as a craft again. Photoshop is now helping make basic video animations. Indesign lets you create Flash experiences. Now more than ever, the person who can leverage all of these together is the person who gets the callback!

The tour is 49.00 and does not contain a workbook. However, you DO get a copy of Dave’s Adobe CS4 Suite Integration by Dave Cross. That’s almost like us paying YOU to attend.

Make sure you stop by the tour. San Diego is this Friday but we are coming to the following cities after that:

Boston, MA
Tuesday, December 01 2009

Washington, DC
Wednesday, December 02 2009

Atlanta, GA
Monday, December 14 2009

Today we have a review of the Olympus E620 from Steve Baczewski . Check it out below:

The 12.3-megapixel Olympus E-620 is one of the lightest, most compact DSLRs on the market. It succeeds Olympus’s E-520 and inherits features from the higher end E-30 DSLR. The E-620 has built-in image stabilization that works with any Four Thirds lens, and an articulated 2.7″ LCD that makes shooting with Live View efficient. Buttons on the back are illuminated for easy identification in low-light shooting, and Olympus has added the E-30’s wonderful Creative Art and Multiple Exposure filters to the E-620’s conventional command dial. Curiously, the E-620 bucks a trend by not including video capture—a compelling feature in this very competitive price range.

Click here to read the rest of the review

Back Page Contest Deadline Extended!!!
So, I wrote yesterday about the Layers Back Page Design Contest and how you can win a 1.5-TB Guardian MAXimus quad interface hard drive courtesy of our friends at Fotolia and all of a sudden people are fired up and sending information for the contest. So much so, the editor decided to extend the contest to November 30! I thought that was pretty magnanimous of him considering.. well.. its a 1.5TB drive!! Make sure you go into the Back Page Contest and enter!

Contest Time
Go to the Contact page, select the Layers Blog drop-down, then fill in your name, email address and answer to this week’s following question. Remember, the contest will end Thursday 5PM,. and the winner will be announced Friday morning.

The Contest Question:
One of my favorite web ladies, Janine Warner, wrote a cool piece about something in the latest Layers magazine. What did she write about?

The Prize:
A copy of Photoshop CS4 Beauty & Portrait Retouching Kit with David Cuerdon The stuff you will learn there will amaze you.

Have a wonderful week everyone! We’ll see you guys back here tomorrow morning!

The Need for Speed

The designer is the first person to get blamed when a website is sludgy. The engineers start asking about the rounded corners, the product manager wonders about the choice of fonts, and the client starts noticing a dip in sales or retention. A designer who isn’t armed with knowledge about performance can often fall into the trap of blaming the rounded corners—they remove important design elements or engaging features, just hoping the site will get faster.

With clients demanding more video, Flash, and interaction from our websites than ever before, how do we fit in all that functionality and have a fast site that users will love? After reading the 10 tips in this article, you’ll know what matters to performance (and what doesn’t!) and be ready to design fast websites.

Speed Tip #1: Create library of smart objects
Duplication can happen in any project when we lose sight of the designs we’ve already created and add new features that are just too similar and don’t add value. The rule of thumb is that if two designs are too similar to be used on the same page, they are too similar to be used on the same site. Choose one. [Insert Image_01] CAPTION: Rounded corners from Yahoo! Personal Finance are too similar. Most users aren’t sophisticated enough to notice the subtle variation. Each rounded corner module requires additional images and CSS, which slows the page.

A library of smart objects can be used to design new pages in your website. The goal is that new designs should only be created when the existing objects are insufficient. Perhaps you’re wondering what I mean by objects? Imagine that all the different parts of your designs were like LEGO bricks that you could mix and match to create new and interesting pages. If contours, backgrounds, block headers and footers, tabs, drop shadows, and lists could all be combined in different ways, it would allow tons of flexibility in page layout and design. The library allows you to quickly find out what objects already exist, and how they were intended to be used. Rather than hunting around in multiple Photoshop and Illustrator files on different designers’ computers, a library is a one-stop-shop where you can store these building blocks as smart objects.
The library should be something like a style guide, but less formal, and the objects should be stored in such a way that we can quickly grab an existing rounded corner box, stretch it to a different height and width, and pop it into a mockup for a new page. New objects should be added to the library when the design has stabilized, and stale objects should be removed so they aren’t inadvertently used. A library can help you avoid unnecessary duplication.

Speed Tip #2: Use consistent semantic styles
When a new site is born, the style goals are usually clear. As the site evolves, things tend to get a bit muddled as more people touch the design and the client changes direction multiple times. The more consistent your styles, the leaner the code will be. Explain to developers not only what something looks like, but when and how it should be used (semantics), and the code will be much more efficient.

A Web developer might call a title “bigGrayHeading,” then a few months later, the client prefers blue. If the developer understands your intentions, she can call it “section” or “product,” which will be very clear to people building new HTML pages. Naming layers is helpful, but your thought process won’t always be obvious from the PSD. Nothing can replace good communication.

Speed Tip #3: Separate contour and background color
Photoshop naturally makes modules that are transparent on the outside. You choose fill and stroke colors, and it does the rest. On the other hand, you can achieve truly fast websites only if you separate contour from background and content. The goal is to be able to combine any contour with any background color, header, footer, image, or other content.

The same basic glow combined with a transparent (left), blue (middle), and gray striped (right) background. A contour that’s transparent on the inside requires careful selection of pixels and progressively enhanced PNG8 to keep the curve as smooth as possible.

The same contour can also be combined with different headers, footers, or even content and images. Because it’s transparent on the inside, the design has loads of flexibility and is very fast.

Unless you’re willing to have square corners in Internet Explorer, you can’t have a module that’s simultaneously transparent on the inside and outside. A module that’s above a variable background like an image, gradient, or text won’t be as flexible and the site may be slower.

Speed Tip #4: Optimize images and sprites
Most designers know about the Save for Web feature in Photoshop, but you may not know that you can make images even smaller using techniques that cause absolutely no loss in quality. Pixel for pixel, the image is exactly the same, except the file size is smaller. First, choose a reasonable quality via Save for Web. Next, upload images to http://smush.it, and any wasteful image bloat will be removed. Most sites can remove between 10–40% of the total weight by putting their images on a diet!

Speed Tip #5: Avoid nonstandard browser fonts
One of the main complaints I hear about designing for the Web is the lack of typographical control. You want beautiful fonts, but for the moment, the Web makes that impossible. As a workaround, designers often create headings, buttons, and other elements with the text baked into the background graphic.
This can slow the site to a crawl. Even good ideas, like combining background images into CSS sprites, can have unintended consequences when we make seemingly innocuous design decisions. Sprites grow and grow as more text and background color combinations are created. Text should be real HTML text, not images. This is one of the first things to check when a site is exceptionally slow.

Amazon sprites include text as images, a practice that makes their sprites larger.

Speed Tip #6: Avoid height alignment
Height alignment with CSS alone isn’t really viable, and still requires expensive JavaScript. Every time your script jumps through the elements on an HTML page, the site will get slower. The more times it happens, the slower it will be. Height alignment requires a lot of these jumps. Insofar as it’s possible, avoid designs that require height alignment.

Speed Tip #7: Choose your bling carefully
Every site tries to have something special—a design element or feature that sets it apart from other sites in the same space. Unfortunately, if you add too many special touches, frustrated users will only notice how slowly the site loads. Most of the design should use shared elements that are common and consistent across the entire site. Save the exceptions—the bling—for high-impact situations that really make your site stand out.

Avoid large images or Flash below the fold and in secondary tabs, few users will make it that far, particularly if your site is slow. Every time you consider adding bling to the site, ask yourself how that particular element will impact the user experience? Is it worth making the site slower?

Keep in mind that tolerance for both latency and visual decoration are often market dependent. Users don’t always distinguish Web and desktop applications, so their expectations will be higher. They may also be more or less tolerant of slow pages depending on their motivation for visiting the site, for example, PBS Kids versus Mint.com. Be aware of market constraints, and avoid one-size-fits-all bling.

Speed Tip #8: Be flexible (height and width)
Output from tools such as Photoshop is fundamentally different than webpages, and in some cases, this makes it more challenging to design for the Web. In Photoshop, you create a box, set its stroke, choose the radius of its rounded corners, and specify a height and width of, say, 393px. On the other hand, for the Web, most container objects should be height and width agnostic. Why is that?

Changes in module width, background color, or background image are an excellent example of module reuse on Yahoo! Personal Finance. The module can even contain a carousel.

Setting height or width in pixels limits the ways that you can reuse an element. Reusing the same element in different ways is great for performance; the user already downloaded the images and CSS, so it’s very fast. Grids should control the width and content should control the height. That way, when you add another paragraph, the rounded corner box will grow taller to accommodate it. More about grids in the next tip.

Speed Tip #9: Learn to love grids
Website performance is all about abstracting reusable elements. Grids are a great way to do just that. Familiarize yourself with the grids used on your websites. Sometimes a few pixels larger or smaller means your element will fit an existing grid and you can avoid slowing the site with custom code.

Grids may be used to divide any area into subsections. Gutters are sometimes included.

When choosing a grids system for a new site, it can be tempting to choose fixed pixel widths, but consider using percentages as they respond better to changes in overall site width when, for example, the number of columns varies or a redesign widens the overall layout. Try the liquid grids from my Object-Oriented CSS open source project to see this effect in action (http://wiki.github.com/stubbornella/oocss).

The same thirds grid divides the main column of the page and arranges the content, in this case, photos of sweaters on La Redoute. Using grids consistently throughout a design helps the page load faster as the CSS file stays lean and efficient.

Speed Tip #10: Count your suitcases
Weigh them, too. Part of figuring out how to make your websites faster is accurately assessing how bad things have become. This is easier than it might seem. There are two simple things that are responsible for most performance problems:

• Too many components is kind of like arriving at the airport with four pieces of checked luggage and three carry-ons. Each JavaScript, CSS, image, Flash, sprite, etc. counts as one component. Having around 50 components is normal, but if you want to fit more functionality into a faster page, you’ll need to bring this number down.
• Out-of-control page weight is like the traveler who arrives at the airport dragging suitcases so heavy that the baggage handler can’t even get them onto the belt. Websites that are too heavy will always be slow; keep in mind that most of our users don’t have the fancy computers and fast connections that we take for granted. Page weight is usually measured in kilobytes (which can be abbreviated KB or K). The average site is around 350K, but with the techniques in this article, you can do far better than that.

First, install Firebug (http://getfirebug.com), a free extension to Firefox. In Firebug, click on the Net tab, make sure All is selected, and scroll to the bottom. You’ll see total weight and number of components listed in the last row. Compare with industry averages or competitors’ websites to know where you stand. Dreamweaver shows file size and estimates download time, but components aren’t measured properly, so it’s best to use Firebug.

Firebug lists total components (called requests) and page weight (KB) for the Yahoo! search results page.

The designers I’ve been fortunate enough to work with have been amazing user advocates, relentlessly focused on creating a more interesting and valuable experience. After reading the 10 tips in this article, you’re ready to make lightning-fast speed and interactivity part of that user experience.

Hey everyone! Just wanted to get one more post in there before I took off for the weekend. We are presently running a Layers Back Page Design Contest that is scheduled to end on November 30, 2009 – and the winner of it get’s a sweet drive, courtesy of our friends at Fotolia. Our editor, Chris Main shares with us the details of this contest. Now, obviously I can’t win the contest, but I thought it be fun to make up something to share of what I would like an AR thing to do, conceptually:

The Mission

In the “How’d They Do That?” cover story in the September/October 2009 issue of Layers magazine (p. 30), we learn about augmented reality (AR). Most of the AR examples mentioned in the article use a printed marker to trigger the AR experience. Your mission is to create an AR marker for a fictitious movie appropriately titled The Marker. You can give your movie any theme you desire (i.e., science fiction, action/adventure, drama, comedy, etc.). For marker examples, check out the one for District 9 at www.multinationalunited.com/training.

More information on the contest here! Good luck everyone!!!

In this classic moments episode, RC does some symbol swapping in Flash and reviews the George iPod dock. Corey creates a 3D package design in Photoshop.

You can download each episode by subscribing to the podcast on iTunes.

var so = new SWFObject('http://media.kelbymediagroup.com/players/player.swf','mpl','500','300','7'); so.addParam('allowfullscreen','true'); // so.addVariable('type','rtmp'); so.addVariable('file','http://media.kelbymediagroup.com/switch/video/layers-tv-episode-111.mp4'); so.addVariable('plugins','hd-1'); so.addVariable('hd.file','http://media.kelbymediagroup.com/switch/video/layers-tv-episode-111-hd.mp4'); so.addVariable('hd.state','false'); so.addVariable('image','http://www.layersmagazine.com/images/layerstv-logo.jpg'); so.addVariable('height','300'); so.addVariable('width','500'); so.addVariable('autostart','false'); so.addVariable("backcolor","0x000000"); so.addVariable("frontcolor","0xF1F1F1"); so.addVariable("lightcolor","0xF88E21"); so.addVariable("quality","100"); so.write('player');

Thank you so much to iStockphoto for providing us with images to use for the show. Be sure to visit them for all of your image needs: iStockphoto

Have an idea for the show? Click on the Contact Us link below and send us an email. Be sure to select Layers TV from the drop down. We’d love to hear from you!

Contact Us

View past episodes of Layers TV

In this classic moments episode, RC does some symbol swapping in Flash and reviews the George iPod dock. Corey creates a 3D package design in Photoshop.

RC and Corey have decided that the weekly contest winner from Layers TV will be announced in RC’s blog post. Remember when you submit your answer in the contact form to choose Layers Blog from the drop-down menu. Be sure to check the front page post for the name of this week’s winner and tune in to this week’s episode to find out what the contest question and prizes are.

 

by Janine Warner:

Dreamweaver makes it easy to add Flash Video to your webpages, but if you want to display your video in QuickTime format, you’ll have to take care of the various settings and other options yourself. In the following steps, you’ll learn how to easily control and customize your QuickTime videos in Dreamweaver. (Note: This tutorial works for both Adobe Dreamweaver CS3 and CS4. The instructions will also work with Windows Media video and other formats, but the parameters will have to be adjusted for those formats).

1 PREPARE QUICKTIME VIDEO IN A VIDEO EDITOR
Although you can insert many different types of video into your pages in Dreamweaver, you’ll first need to edit and convert the video in a video editor, such as Adobe Premiere Pro (shown here).

Click here to read the rest of the tutorial

Dreamweaver makes it easy to add Flash Video to your webpages, but if you want to display your video in QuickTime format, you’ll have to take care of the various settings and other options yourself. In the following steps, you’ll learn how to easily control and customize your QuickTime videos in Dreamweaver. (Note: This tutorial works for both Adobe Dreamweaver CS3 and CS4. The instructions will also work with Windows Media video and other formats, but the parameters will have to be adjusted for those formats).

1 PREPARE QUICKTIME VIDEO IN A VIDEO EDITOR
Although you can insert many different types of video into your pages in Dreamweaver, you’ll first need to edit and convert the video in a video editor, such as Adobe Premiere Pro (shown here).

2 OPEN THE INSERT PANEL IN DREAMWEAVER
Dreamweaver’s Insert panel (Window>Insert) provides a handy collection of options, including the Insert>Media>Plugin feature you’ll need for adding video in QuickTime, Windows Media, or any format other than Flash. If you’re using Dreamweaver CS4, you have the option to keep the Insert panel at the top of the workspace using the CS3 workspace layout (Window>Workspace Layout>Classic) or integrate it into the panels, as we’ve done here. (Note: In Dreamweaver CS3, this feature is called the Insert Bar and it’s only available at the top of the workspace.)

3 INSERT QUICKTIME FILE
First, place your cursor where you want to add the video in your webpage. Then, with the Insert panel open and the drop-down menu at the top set to Common, click the arrow to open the drop-down menu next to the Media icon and select Plugin (note that the Media icon changes to reflect whatever you last selected). Alternatively, you can choose Insert>Media>Plugin.

4 SELECT THE QUICKTIME FILE
If you’ve used the Insert Flash Video (FLV) options in Dreamweaver, you may be surprised that when you add video in other formats using the Plugin option, you won’t be presented with a dialog that contains settings for size or other video options. Don’t worry; just select the QuickTime file for now (as you would if you were inserting an image into the page—just Control-click [PC: Right-click] on the Plugin icon and select Source File). You’ll get a chance to set the size and other settings in the following steps.

5 SPECIFY SIZE IN THE PROPERTY INSPECTOR
Because Dreamweaver can’t automatically detect the size of a QuickTime file, you’ll need to specify the size after you insert it into the page. To do so, click to select the 32×32 icon that Dreamweaver inserts in place of the video and then enter the actual size of the video in pixels in the W (width) and H (height) fields in the Property inspector. The video file we’re using in this lesson is 720×480 pixels. Once you input the sizes, the icon will expand to the specified size.

6 ADD A PLUGIN PAGE URL
With the video selected, you can also use the Property inspector to add a Plugin Page URL. The Web address you enter in the Plg URL field will be displayed in place of the video if the visitor to your site doesn’t have the QuickTime player installed on his or her system. If you’re using QuickTime video, the Plugin URL is http://www.apple.com/quicktime.

7 ALIGN YOUR VIDEO FILE
Although you can use the Align drop-down menu in the Property inspector to align your video, the better option is to use Cascading Style Sheets (CSS). In this example, we’ve created class styles named .float-right and .float-left using the Float options in the Box category of the CSS Rule Definition dialog. To create a new class style, click on the New CSS Rule icon in the CSS Styles panel, choose Class in the drop-down menu, name your style, and click OK to enter the CSS Rule Definition dialog. (You’ll find lots more information about creating and using class styles on the Layers magazine website in the Dreamweaver tutorials section.)

8 SPECIFY A BORDER, V SPACE, AND H SPACE
To add a border to your video, enter the size you want in pixels in the Border field in the Property inspector. You can also add V Space and H Space (vertical and horizontal space, respectively). When you use H space and V space, you add margins to the top and bottom or left and right. If you define a style in CSS to specify margins and border, you’ll have more options and can choose to add margin space to any or all of the sides of the video, as well as change the color and style of the border.

9 USE PARAMETERS FOR ADVANCED SETTINGS
For more advanced options and settings, you’ll use the Parameters option in Dreamweaver and you’ll need to know the parameter options specific to QuickTime (or whatever video format you’re using). To open the Parameters dialog, click on the Parameters button in the Property inspector (remember, the video must be selected for these options to display in the Property inspector).

10 SET VIDEO TO LOOP WITH PARAMETERS
If you want your video to play in a continuous loop, use the Parameters dialog, enter “loop” as the Parameter and “true” as the Value, and click OK. Most parameters work this way with true being the setting to turn an option on, and false the setting to turn an option off. Thus, if you set the Parameter to “loop” and the Value to “false,” the video won’t loop.

11 TURN OFF AUTOPLAY
To add additional parameters, click the plus (+) sign at the top of the Parameters dialog and then enter each parameter and value on its own line. Another popular QuickTime parameter is Autoplay. To prevent the video from playing when the page loads, enter the Parameter “autoplay” with the Value “false.”

12 MORE PARAMETERS
You’ll find more parameters and Embed settings for QuickTime at www.apple.com/quicktime/tutorials/embed2.html. Another popular option is to include the video controller using the Parameter “controller” and Value “true.” To hide the controller, set the Value to “false.” And here’s an advanced tip: For the controller to display properly, you need to add 16 pixels to the Height of the video in the Property inspector. So the new Height in this example would be 496 pixels.

13 PRESS PLAY TO PREVIEW
Dreamweaver CS4 makes it possible to preview the video in the Dreamweaver workspace. Just select the video and press the Play button in the Property inspector and the video should play much as it would in a Web browser with the QuickTime plug-in. You can also preview your work by using the Browser preview option (File>Preview in Browser). (Note: You must have the QuickTime plug-in installed on your computer for the QuickTime video to play in a Web browser.)

(Editor’s Note: The current Layers Back Page Design Contest is based on the following article from the Sept/Oct 2009 issue of Layers magazine. But if you want a chance to win a 1.5-TB Guardian MAXimus quad interface hard drive and $200 in credits from www.fotolia.com, you better hurry because the deadline is November 16, 2009. Click here for more information.)

In a recent issue of Layers magazine, we asked readers to submit their favorite print, Web, and video designs currently in the marketplace. In turn, we promised to track down the original creators and force them to tell us their secrets (as it turns out, all we had to do was ask politely—everyone we spoke to was very nice and accommodating).

Anyway, after going through all the submissions, there were two that really captured our attention: the GE Smart Grid Augmented Reality (AR) website and the Black Day to Freedom video by Rob Chiu. In fact, we asked so many interview questions about these two projects that we ran out of room for any of the print submissions. But don’t worry, we’ve sent all the print submissions to Corey and RC over at Layers TV and have asked them to cover “How’d They Do That?” in a future episode. So after you read this article, be sure to keep an eye out on www.layersmagazine.com/layers-tv.

CHANGING YOUR REALITY

AR will have you seeing things in a different way

When the GE Smart Grid Augmented Reality website was brought to our attention, our productivity took a major hit for a good 25–30 minutes. If you haven’t seen AR in action, then you’ll have to check this one out for yourself. So before you read any further, launch your Web browser and head on over to http://ge.ecomagination.com/smartgrid/#/augmented_reality. Follow the instructions for Getting Started on the right side of the screen, because you’ll first need to print a page to use for the demonstration and you’ll need a webcam. Don’t worry, take your time. You’ll find that magazine pages can be very patient.

(What’s taking you so long?)

Oh, there you are. Welcome back. Pretty mind-blowing stuff, eh? AR has actually been around for some time now, but it’s a technology that hasn’t quite made it into the mainstream yet, so it’s still new to a lot of people. But as we were working on the story, AR seemed to be popping up in the news everywhere we turned.

According to the GE website, they used FLARToolKit (FL for Flash and AR for augmented reality). FLARToolKit—developed by Tomohiko Koyama (a.k.a. Saqoosha) and Ryo Iizuka—is an ActionScript 3 version of ARToolKit, which is the original C version of the application. ARToolKit was originally developed 10 years ago by Hirokazu Kato, a Professor at the Nara Institute of Science and Technology in Japan, and then commercially licensed by ARToolworks (www.artoolworks.com).

Armed with this knowledge, we decided to start with ARToolworks and trace the path that AR took to end up on the GE Smart Grid website. (By the way, if you find yourself wanting to venture into the world of augmented reality, ARToolworks offers commercial licenses for both versions of the ToolKit. [You may want to link to the opensource sites]For the open source download of ARToolKit for noncommercial use, visit http://sourceforge.net/projects/artoolkit.)

In the Beginning: ARToolworks
For the first stop on our journey, we’ll speak with Mark Billinghurst from ARToolworks. Mark is one of the founders of ARToolworks and was also involved with developing ARToolKit with Hirokazu Kato when they were both at the Human Interface Technology Laboratory at the University of Washington in Seattle.

Layers: So, Mark, would you define the term “augmented reality” for us?

Mark: Augmented reality is technology that overlays computer graphics onto the real world in real time to create the illusion that three-dimensional virtual images are part of a user’s real environment. Computer scientist, Ron Azuma, says that augmented reality has three key characteristics: It combines real and virtual images; it’s interactive in real time; and the virtual images are registered in 3D.

Layers: How did the concept for augmented reality first come about and how was it developed?

Mark: Augmented reality has a long history, beginning with early experiments with head-mounted displays by Ivan Sutherland over 40 years ago. Since then a lot of interesting research has been done by the military and in university and industry laboratories—but using very expensive, specialized technology. However, in the last 10 years, AR has become cheap enough and easy enough to use that it’s getting far more widespread. A key part of this was the development of ARToolKit by Hirokazu Kato 10 years ago. That software uses computer vision to track the user’s viewpoint and overlay virtual images over live video of the real world. For the first time, this made it easy for programmers to create AR applications. Now, people can have an AR experience through their game console, personal computer, Web browser, or mobile phone, so millions of people can easily have access to the technology.

Layers: What kind of hardware and software is needed to create and view augmented reality?

Mark: To view AR content, a user needs a camera, computer processor, and display. For most people this means plugging a USB camera into their desktop or laptop computer, but other devices such as mobile phones can also be used. To create an AR experience, people can use low-level tools such as ARToolKit, in which case they’ll need to be comfortable with computer programming. However, the development of FLARToolKit means that people with Flash programming experience can build their own AR websites. Most recently, tools such as BuildAR by the HIT Lab NZ (www.hitlabnz.org/wiki/BuildAR), also based on ARToolKit, can be used by nonprogrammers to easily create AR scenes.

Layers: Where do you currently see augmented reality being used and how do you see it being used in the future?

Mark: Augmented reality has many possible applications. Currently, it’s being used as a fantastic marketing tool, and also in computer games and certain niche areas such as medical visualization and industrial manufacturing. In the future, mobile phone-based AR will become more common and used for activities such as personal navigation or location-based social networking. [See “AR Goes Mobile.”—Ed.] I think the technology also has great potential for educational applications that teach in entirely new ways.

Let There Be Flash: FLARToolKit
Now it’s time to move on to the Flash version of ARToolKit. We think this is the version that most of our readers will be interested in. As mentioned earlier, one of the developers of the FLARToolKit was Saqoosha, CTO of Katamari Inc. (http://katamari.co.jp)—a Web creative company in Japan. He also has a blog at http://saqoosha.net/en.

Layers: When did you first learn about ARToolKit, and why did you feel there was a need for a Flash version?

Saqoosha: I read an article on ARToolKit in June 2007 [http://kougaku-navi.net/ARToolKit.html]. That was my first contact with ARToolKit. The original C version of ARToolKit required you to download and install the application to experience AR. Most people don’t want to bother with a procedure like that.

But I was very interested in AR technology and intended to tell a lot of people about ARToolKit. Flash Player is widely installed, so I thought that if ARToolKit could be use on Flash Player, many people could easily experience AR.

Layers: What kind of projects have you used FLARToolKit for?

Saqoosha: My first project using FLAR was Desktop Fireworks [http://vimeo.com/1634128]. This was very experimental and a very simple example of how to use FLAR. I recently did another FLAR project for a campaign that supported the Japan National Soccer Team with messages from supporters. The messages input at the stadium fly out from the marker [http://vimeo.com/5012399].

And North Kingdom Said It Was Good: GE Smart Grid
The GE Smart Grid site was developed by North Kingdom (www.northkingdom.com), a Swedish interactive design firm founded in 2003. According to North Kingdom’s mission statement, “Our talented team of artists have a single, unified vision to push brands to new places, bringing every facet to life through interaction, imagination, and innovation—it’s what we call our design DNA.” They’ve proven this with their creative use of AR. In addition to GE, they’ve also done work for Coca-Cola, Toyota, and Vodafone. We’ll speak with one of North Kingdom’s co-founders, Roger Stighäll.

Layers: When Goodby Silverstein & Partners/GE first approached North Kingdom about the Smart Grid project, was AR already part of the grand scheme? How did the AR portion of the project progress from beginning to end?

Roger: Goodby were the ones to bring up AR as a potential ingredient for the campaign. For a long time we had been curious about AR, but never actually got our hands really into doing it. Since the field was quite unexplored to both us and Goodby, we got a couple of weeks to do R&D, to figure out what was achievable. We had a lot of fun (and certainly also frustrating times) trying to make the most out of the AR experience.

We had a very organic and open approach to the development of the AR experience. We set out with the idea that the object should come out of the marker and somehow be interactive, and then we added new features along the way. Some ideas were tested and canned, the ones you see survived. The simplicity of FLARToolKit is its main feature, so the implementation of the kit was very fast—basically the first thing we did.

Layers: How advanced does a Flash developer need to be to really take advantage of FLARToolKit?

Roger: You don’t need to be a star. It’s very simple if you have a basic understanding of 3D graphics. There are loads of very good tutorials that any AS programmers could wrap their heads around.

Layers: Does North Kingdom have any future plans for AR?

Roger: Certainly, this is a fun and eye-catching area, so we’ll continue to play with this as long as we think we can create interesting experiences in this field. We are concepting some interesting AR ideas that hopefully will come to life this fall.

AR goes mobile

Want to see some really cool AR applications for mobile? Then check out the Wikitude AR Travel Guide (www.mobilizy.com). Developed for the Android platform, this app is based on Wikipedia, Qype, and Panoramio. Through the use of AR, digital information about landscapes and landmarks is overlayed on the live view image of the cell phone.

SPRXMobile also just recently announced their first mobile AR browser at http://layar.eu. Just like Wikitude, Layar uses a combination of the phone’s camera, GPS, and compass to overlay real-time digital information on top of the mobile device’s screen. Layar can help you find ATMs, houses for sale, hotels, etc. Be sure to watch the cool video demo. Currently, this app is also only available for Android devices, but we can’t imagine that the iPhone would be too far behind now that the new iPhone 3GS has a digital compass.

Practical applications

See how BMW is putting augmented reality to work. Visit www.bmw.com/com/en/owners/service/augmented_reality_workshop_1.html and check out the demo video under Related Topics.

Some not-so-practical, but really cool, applications

If you’re a Star Trek or Transformers fan like we are, then you’ll get a kick out of these AR experiences from Total Immersion (www.t-immersion.com). You’ll probably need to install the plug-in for your browser, but it’s worth the effort.

EMOTIONS IN MOTION

How video can help us better understand our world

The Layers’ reader who recommended Rob Chiu, recommended his entire body of work, so we spent the better part of an afternoon reviewing all the pieces Rob had available at http://theronin.co.uk/Motion. From the technical beauty to the eye-catching, seamlessly integrated effects to the strong emotional impact, we found ourselves completely engaged in every single video.

Based in London, Rob has worked in the field of short film and motion design since 2000. Under the working alias of The Ronin, he has produced narrative-based works for clients such as Leica Camera, BBC, Greenpeace, EMI Records, Nokia, Channel 4, and 20th Century Fox. His short films have been featured in a number of film festivals including Edinburgh, onedotzero, RESFEST, and Clermont-Ferrand. In 2005, his three-minute, animation-based documentary on psychosis for Channel 4/APT Films won the award for best animated short in Canada. His short films Black Day to Freedom and Things Fall Apart have toured extensively as part of the festival circuit, winning numerous awards along the way.

In fact, it’s Black Day to Freedom that we’re going to focus on here. According to Rob, the film was “created as a fictional back-story to the global problem of the displacement of peoples. It portrays a city in turmoil with the loss and tragedy of a young family at the center of the tale.” After we recovered from some the very powerful imagery contained in the film, we learned that Rob animated it entirely in After Effects—he hadn’t used any 3D applications at all. It was time to ask Rob some questions.

Layers: Let’s begin with a little bit about you. You originally started out as a print designer. When did you first know that you wanted to be a filmmaker?

Rob: I’ve always wanted to tell stories whether through music, design, or film. I started in print design, as that was the easiest route back then. I was heavily influenced by the likes of David Carson, Neville Brody, and Attik and was drawn into the world of Photoshop. I naturally moved into After Effects after discovering that it was relatively similar to Photoshop with the added bonus of a Timeline. The first version I used was 3.1, so it’s going back a bit now. While I was working in a design agency, I studied for a BA degree in Graphic Design and used the course as an output for my personal work. After teaching myself the basics of After Effects, I submitted a short AE-based film as my final piece, and then used that to launch my career in moving images. I’m now slowly moving away from pure motion design and moving into live action film directing—but it basically all evolved from a love of print design.

Layers: You’re also a photographer. Does your photography play a factor in any of your productions?

Rob: Mainly, I use photography as a tool to experiment with framing, lenses, depth of field. I then take away what I’ve learned from taking stills and apply it to my film-based work. It allows me to get on the same page with a DoP [director of photography] really quickly and definitely allows me to be more confident when directing something. Secondly, I use my photography for storyboarding and style frames. When I boarded the Webbys intro, I used a series of photos that I had taken over the years as a reference for the client as to how I intended to shoot and grade the piece. Lastly, I occasionally do the odd illustration for magazines such as .net or Computer Arts and I base my designs on photographs that I take.

Layers: Can you give us a short list of the equipment that you use, including cameras and software?

Rob: It all depends on the production. I don’t own that much kit and the stuff I do own is used mainly for personal projects, as it’s not professional gear. I recently shot a short film on two RED cameras—one hand-held, the other on steadicam—but there’s no way on earth that I could afford to actually own this kind of gear. As far as my own gear, I own a couple of Macs—a MacBook Pro and an older G5 tower, which I’m soon getting rid of for a new iMac due to the space limitations at home. Cameras I have include a Canon HV20 HDV camcorder with a Letus adaptor with Nikon lens mount. This allows me to put prime lenses on the front of the Canon so that I can get some depth of field. I shot Left Unsaid entirely with that setup. I also own a Nikon D200 with a few lenses. Installed on my Macs are CS4 Master Suite, Final Cut Pro, and some font-management programs but that’s about it really.

Layers: Where did the concept for Black Day to Freedom come from and what was your ultimate goal for the film?

Rob: Way back in 2004, The University of Huddersfield approached me about filming some computer training sessions they were putting on for asylum seekers in the UK. I ran around following these courses and quickly realized there was little point to the film and it was going to end up being a missed opportunity. I proposed that we should talk to the asylum seekers, find out why they were here, and have them write some poems and stories on what had happened to them that made them leave their homes. I then took all this material and collated it into one story, which became Black Day to Freedom. The name came from one of the poems; it’s actually incorrect, as it should be Black Day for Freedom, but as that was what was written on the paper I kept it, as it felt right.

My ultimate goal at the time for the film was to show people what was happening overseas with the whole invasion of Iraq and the mass displacement of people. At the time there was a lot of negative press about asylum seekers taking all the money and housing, but no one really gave much thought to why they were even here. We packaged it all up as a DVD with a book that featured over 30 illustrators and designers worldwide and then sold it online for a short while. The film did pretty well in short film festivals and really helped cement me as a motion designer and short filmmaker. Even to this day when I talk at conferences, this is the most well-received piece out of everything I’ve done. I’m really proud of it!

Layers: Why did you decide to use only After Effects to animate Black Day to Freedom?

Rob: Mainly because I had no other way of achieving the epic scale of the film with any other tool. It was impossible to film something like this, and at that time I had no idea how to even go about doing that. The other reason is that I have absolutely no working knowledge of any 3D program, so I decided to do it in AE, which was a challenge, but I think gives the whole piece a very unique look and tone.

Layers: Could you briefly run us through how the film was created?

Rob: After writing out a rough treatment, we shot friends and ourselves for the characters; in fact, anyone we could get to stand in as a reference. My brother, who is an illustrator, then hand drew each character and created the illustration style. These were then individually scanned and cut out in Photoshop. I created the buildings using textures and line drawings—a bit of a mixture of the two really. Everything was built as a three-dimensional object in After Effects, so if you look at it properly, it’s basically just loads of boxes etc., but it worked out okay by using textures and trying to push AE as far as I could.
I even managed to just about pull off some helicopters! There was one scene where the helicopters are flying above the buildings; it’s a 10-second clip and it took forever to render out because of the complexity of the buildings. In hindsight, I would have created some low-res proxies of the buildings, but at the time I was still learning how to do it and kind of making it up as I went along, so I put the camera really high up and used the full-size buildings, which were something like 6000 pixels high each. Crazy!

Layers: In certain sections of the film, the scene switches to color for a brief second and jumps around. How does this technique, as well as your general use of color throughout, add to the overall impact of the film?

Rob: I came up with that effect by mistake. I had rendered out a clip of the scene with a sky and one without, as I was trying to decide whether to go with a sky or without. I was turning one off revealing the other and back on again and thought that it looked pretty cool. So when the moment of violence really starts to get crazy, this whole glitch-type effect occurs, jolting the viewer momentarily. I think it worked pretty well when combined with the audio dropping out except for the sound of a reporter’s voice. It’s actually my favorite scene in the film and the one people usually ask me about. Throughout the rest of the film, there’s very little color, which is why it works so well, I guess.

Layers: We were very impressed by the use of shadows in the film. Why does a shadow or silhouette of a person sometimes have more impact than the real thing?

Rob: I had some drawings of soldiers but quickly realized that they didn’t come across as powerfully as I wanted. By only seeing the shadow, we’re not led along a path that says this is a soldier from country A or B. We actually don’t know whether these soldiers, if soldiers at all, are here to help or to kill. The scene at the end with the guy with his hands on his head originally had a shadow of a soldier as if he was being captured. I rendered it out and the shadow didn’t appear, and I realized that without the shadow, you’re either looking at a guy who is being arrested or you’re looking at a guy regretting what he has just done. I liked that it was up to the viewer to decide, and more importantly, it actually says more by showing less.

Layers: How do you think digital technology has helped the independent filmmaker?

Rob: I think it’s now so easy to go out there and make a film without any financial backing or support. You can basically just make a film with a phone camera and a laptop these days. These are good times to be a filmmaker.

Photomerge in Photoshop CS4 does an amazing job of aligning and blending panoramas, but occasionally you run into an image where there’s a glitch that has to be fixed manually. In this tutorial, we’ll take a look at panorama alignment problems and explore various strategies for fixing them. We’ll finish with a look at how to get great-looking moving water in high-dynamic range (HDR) shots.

1 A PANORAMA ALIGNMENT GLITCH
In most cases, the seams created by Photomerge are very successful, but sometimes it may have “issues.” This panorama was made from three horizontal images taken in Santa Fe, New Mexico. And no matter how many times I’ve tried to get Photomerge to blend these images, it always creates an alignment glitch at the top of the locomotive, just above the windshield. In this section of the article, we’ll create the initial panorama—glitch and all—and then explore a few different ways to try and fix the problem.

2 CREATE THE PHOTOMERGE
To experience the steps from the beginning, launch the Photomerge process. In this tutorial, we’ll launch it from Adobe Bridge by selecting the three thumbnails and choosing Tools>Photoshop>Photomerge. In the Photomerge dialog, leave the Layout set to Auto and make sure that Blend Images Together is checked. Click OK.

3 INITIAL EVALUATION
At first glance it might seem that the most straightforward way to tackle the problem would be to edit the layer masks that Photomerge has created. The problem with this approach, however, is that there are three layer masks and each one is precisely aligned with the other two. Although it’s not immediately apparent in the blended result, there’s also a problem created by the auto blending, which has changed tonal values in the sky to match the layer masks. Editing these masks will reveal this tonal mismatch and create additional problems.

4 TURN OFF THE LAYER MASKS
To see the potential problems created by the auto blending, Shift-click on each of the layer masks to temporarily disable them. You can see an obvious variation in the sky tones just above the cab of the locomotive (in this illustration, the image was darkened with a curve to make these tonal changes more visible). The tonal variation in this area is in the exact shape of the same area of the layer masks for the Train Middle and Train Right layers.

5 PHOTOMERGE, TAKE 2: NO BLENDING
Before we try any complicated patching or cloning repair jobs, let’s see if we can coax a better result from Photomerge. Close the first image without saving it and return to Bridge. With the three thumbnails selected, choose Tools>Photoshop>Photomerge. In the Photomerge dialog, leave the Layout set to Auto but uncheck the Blend Images Together option. Click OK.

6 TAKE 2: REARRANGE LAYERS
For this image, Photomerge has definite ideas about how the layers should be arranged. But one obvious way to try and fix the problem is to simply rearrange the layers so that Train Right is above Train Middle. Hopefully, this will address the problem of the alignment error on the roof of the locomotive. In the Layers panel, rearrange the stacking order of the layers so that Train Right is the top layer, Train Middle is in the middle, and Train Left in on the bottom.

7 MANUALLY ALIGN LAYERS
Even though we turned off the blending in the Photomerge dialog, there are still a couple of automated features left for us to try. To nudge these features in the right direction, we’ll manually align the layers. Make the Train Right layer active. Double-click the Zoom tool to zoom to 100%. Select the Move tool (V) and use the Up and Left Arrow keys on the keyboard to nudge this layer up and left until the “A” in the word RAIL aligns with the same letter on the middle layer. This will also align the top of the train.

8 CUSTOM LAYER TRIMMING
The letter “A,” which we just aligned, could conceivably still cause some problems, so let’s fix that. Make sure the top layer (Train Right) is active, choose the Lasso tool (L), and set the Feather value in the Options Bar to 0 px. Make a lasso selection around the letter “A” in RAIL and press Delete (PC: Backspace) to delete this chunk of pixels. Press Command-D (PC: Ctrl-D) to deselect.

9 MODIFY THE LEFT SIDE
Now let’s inspect the left side of the image. Creating a seam through the back of this older train car makes no sense. It’s better to choose a less-complicated seam: on the far side of this car in the background of the image, where the newer RAIL RUNNER cars can be seen in the distance. Use the Lasso tool with the Feather set to 0 px and make a selection of the part of the Train Middle layer that overlaps onto the Left side layer. The right side of this selection should be placed in the distance through the new train cars (see illustration).

10 MORE CUSTOM LAYER TRIMMING
Make sure that the middle layer—Train Middle—is active and press Delete (PC: Backspace) to delete the selected pixels. (In the illustration we hid the bottom layer—click on its Eye icon—to clearly show what areas were deleted.) Deselect.

Now zoom in for a closer view and make the Train Left layer active. Use the Move tool (V) and the Down and Right Arrow keys to align the layers along the seam in the background where the train cars converge.

11 AUTO-ALIGN LAYERS
In the Layers panel, click on the Train Right layer. Turn this layer’s Eye icon off and on several times and you’ll see how the locomotive isn’t aligning with the same areas on the underlying layer—this is what’s causing the alignment glitch.

Make sure the visibility for all three layers is turned on then select all three layers by clicking on the top one and then Shift-clicking on the bottom one. Choose Edit>Auto-Align Layers. In the dialog that appears, choose Auto for the Projection method and click OK.

12 AUTO-BLEND LAYERS
Now when you turn the top layer off and on, you should see that the locomotive is much more closely aligned with the layer underneath. Make sure that all three layers are still selected in the Layers panel and choose Edit>Auto-Blend Layers. In the small dialog that appears, choose the Panorama option and make sure that the Seamless Tones and Colors box is checked. Click OK. This time, the blend is successful and the alignment glitch on the top of the locomotive is no longer present.

13 RAIL RUNNER DEBRIEFING
As a final step, use the Crop tool (C) to crop the transparent areas surrounding the image.

Most of the time Photomerge works great but for those times when it doesn’t, the techniques that we’ve covered in this tutorial are some things you can try to get a better panorama merge from multiple images. For some images you may need to go even further to touch up alignment problems, for example: using the Clone Stamp (S), the Healing Brush, or creating patch layers. All are good skills and techniques to be aware of when these issues arise.

HOW TO GET GOOD MOVING WATER IN HDR

14 A SOLID NEUTRAL-DENSITY FILTER
One of the most common questions I’m asked about HDR photography is how to deal with the strange artifacts that commonly appear in moving water. I use a solid neutral-density (ND) filter to cut back several stops of light: Less light coming through the lens means the camera must use a much slower shutter speed than would normally be feasible in daylight conditions. With long shutter speeds of one second or slower, rushing water is rendered as a smooth, silky blur. Not only does this look cool, it also hides the usual HDR artifacts that often appear in moving water.

15 CREATE THE INTIAL HDR IMAGE
Let’s explore how good water can look with an HDR image made from four exposures taken in Camden, Maine. I shot the images using a 5-stop, solid ND filter with shutter speeds ranging from 1/4 second to 2 seconds.

In Bridge, select the four source exposures and choose Tools>Photoshop>Merge to HDR. When the Merge to HDR dialog appears, make sure that the Bit Depth is set to 32 Bit/Channel and click OK.

16 CONVERT TO 16 BITS
After the merge is done, choose Image>Mode>16 Bits/Channel to bring up the HDR Conversion dialog. For the Method, choose Local Adaptation from the drop-down menu. Set the Radius to 16 px, the Threshold to 0.50, and adjust the Toning Curve and Histogram curve as shown in the illustration (if you don’t see the curve, click the down-facing triangle to show it). Click OK to apply the conversion.

17 ADD SHADOWS/HIGHLIGHTS SMART FILTER
Control-click (PC: Right-click) on the Background layer and choose Convert to Smart Object from the menu. Then choose Image>Adjustments> Shadows/Highlights. In the dialog that appears, click the Show More Options checkbox to reveal all of the sliders and set them as shown in the illustration. This will help to balance out the tones between the bright sky and water and the rest of the image. Click OK when you’re done.

18 FINAL CURVES ADJUSTMENTS
Open the Adjustments panel, click the Create a New Curves Adjustment Layer icon, and slightly increase the contrast as shown in the Overall Contrast illustration. Add a second Curves layer and adjust the curve as in the Darken Sky illustration. Open the Masks panel and click the Invert button to invert the mask to black. With this layer mask active, use the Brush tool (B) to paint with white at 30% Opacity in the sky, trees, and rocks to darken those areas. As you can see from the detail view of the stream, the slow shutter speeds make the water look great with no visible HDR artifacts.

LIGHTWEIGHT, COMPACT DSLR

The 12.3-megapixel Olympus E-620 is one of the lightest, most compact DSLRs on the market. It succeeds Olympus’s E-520 and inherits features from the higher end E-30 DSLR. The E-620 has built-in image stabilization that works with any Four Thirds lens, and an articulated 2.7″ LCD that makes shooting with Live View efficient. Buttons on the back are illuminated for easy identification in low-light shooting, and Olympus has added the E-30’s wonderful Creative Art and Multiple Exposure filters to the E-620’s conventional command dial. Curiously, the E-620 bucks a trend by not including video capture—a compelling feature in this very competitive price range.

The plastic body feels solid; however, it has no weatherproofing seals and the comparatively shallow grip might feel uncomfortable in big hands. The overall design facilitates familiarity via quick access to frequently used features. It uses dedicated buttons for features such as Live View and Image Stabilization, plus an onscreen superpanel provides all the options for features including white balance, metering, and image quality. To a great extent, scrolling through menus is eliminated.

The camera records in RAW and JPEG formats and has slots for CompactFlash and xD memory cards. The RAW format is supported in both Lightroom and Adobe Camera Raw. The E-620 and E-30 use the same Four Thirds Live MOS image sensor; however, the algorithms and digital engines vary and the resulting image quality in the E-620 files, although not terrible, contain comparatively more noise when shooting in either low light or ISOs greater than 800. In general, image quality is quite good, especially at ISOs under 800.

The files have a wide dynamic range filled with shadow and highlight detail, and hold up to make 17×22″ prints. The sensor offers a choice of four aspect ratios—4:3, 6:6, 16:9, and 3:2—and the cropped areas are displayed in Live View mode. The optical viewfinder is slightly larger than the E-520, but I found it difficult to see the information displayed at the bottom—something to consider if you wear glasses. The E-520’s three-point AF viewfinder system has been replaced with a fast seven-point system that covers a wider area and provides for quick, smooth focusing. Continuous shooting is slightly faster at 4 frames per second versus 3.5. The five-mode metering system and shutter speed range of 60 seconds to 1/4000, plus Bulb, are the same as on the E-520.

The Multiple Exposure filter is a hoot. It allows you to take a shot and then view and compose another subject on the same frame, all while maintaining the original image onscreen.

The 2.7″ 230,000-pixel, articulated LCD facilitates composing subjects at low or high angles, greatly improving the functionality of Live View. It holds up relatively well in bright light. Displays in Live View include an alignment grid, a live histogram, and four live thumbnail previews of different white balance or exposure compensations to help you visualize your image before exposure. Live View offers three AF modes and appears snappier than previous iterations, but it’s still no match for the optical viewfinder when shooting a moving subject. When using Image Stabilization (IS) with Live View, the stabilized effect appears only briefly on the LCD. I preferred the E-520’s implementation, which held the stabilized image as long as you depressed the shutter button half way. Still, the E-620’s IS is effective and compensated for movement up to about three stops—it was rock solid at 1/15 second. The E-620 is a budget-minded, solid, easy-to-learn DSLR.—Steve Baczewski

Company: Olympus America Inc.
Price: $699.99 with 14–42mm lens
Web: www.olympusamerica.com
Rating: 4

Hot: Built-in wireless flash remote; effective dust-removal system
Not: No video capture

Olympus E-620 images

Click on a thumbnail for a larger image. All images ©Steve Baczewski.

Some designers have a background in 3D modeling. I don’t. Still, clients expect me to make their logos spin and dance in 3D space. As much as I’d love to learn how to use Maya or 3ds Max, I don’t have the time or resources to do so.

Thank goodness for Swift 3D 6. It’s a 3D application made specifically for Flash designers. It allows them to draw simple shapes, type text, or import AI/EPS files and extrude them. You can then color and shade the model and animate it using a Flash-like Timeline. Swift 3D ships with preset animations, such as spins and bounces, that you can apply via drag-and-drop. It also comes with a large styles library, so if you want your object to look like glass or chrome, you don’t have to create that look from scratch. You can render out your model in a variety of styles, including photorealism and various cartoonish looks.

Click here to read the rest of the tutorial

Stephen Burns moves 3D models between Lightwave and Photoshop and edits UV maps in this tutorial. Click here to watch Part 1 of this series. Look for Parts 3, and 4 coming soon!

This video requires Adobe Flash Player.

SUPERZOOM COMPACT CAMERA WITH HOT SHOE

When the Canon PowerShot SX1 IS arrived, I was eager to put it to work. After all, a compact camera with a 20x optically stabilized zoom lens and RAW capture is enticing.

The SX1 IS includes full HD video capture (1920×1080 at 30fps), 25 shooting modes, and a host of other features, but the obvious star of this camera is the f/2.8–5.7, 20x zoom lens (28–560mm equivalent). Zoom operation is smooth, it’s quick to focus, and photos are sharp with nice color. The not-so-obvious star (but the scene-stealer for many) is the ability to capture RAW files. More compact cameras should include RAW capture, so thank you, Canon.

This camera is easy to use thanks to the thoughtful ergonomics, straightforward menu, and flexibility of the lens. Users can compose shots on the vari-angle 230,000-dot, 2.8″ LCD, which holds up quite well in bright light, or with the electronic viewfinder. The quality of the viewfinder was so marginal that I didn’t use it.

The 10-megapixel SX1 IS is billed as a serious camera. It’s the first PowerShot to incorporate Canon’s CMOS sensor, something previously reserved for their EOS cameras. It also uses the DIGIC 4 Image Processor with Face Detection Technology, Intelligent Contrast Correction, and Red-eye Correction. Photos are well exposed and contrast is excellent. So I have to ask why is noise evident at ISO 200 and prevalent at ISO 400? I wouldn’t use this camera above ISO 200.

One other problem is that with all these high-end features, and the high-end price, Canon made the power source four AA batteries. This camera deserves better, and the price demands it. Shoot at a low ISO and pack plenty of spares.—Mike Mackenzie

Company: Canon U.S.A., Inc
Price: $599.99
Web: www.usa.canon.com
Rating: 3

Hot: RAW capture; stabilized 20x zoom lens
Not: Noise; AA batteries; price

Canon PowerShot SX1 IS images

Click on a thumbnail for a larger image. All images ©Mike Mackenzie.

by Sean Duggan:

Photomerge in Photoshop CS4 does an amazing job of aligning and blending panoramas, but occasionally you run into an image where there’s a glitch that has to be fixed manually. In this tutorial, we’ll take a look at panorama alignment problems and explore various strategies for fixing them. We’ll finish with a look at how to get great-looking moving water in high-dynamic range (HDR) shots.

1 A PANORAMA ALIGNMENT GLITCH
In most cases, the seams created by Photomerge are very successful, but sometimes it may have “issues.” This panorama was made from three horizontal images taken in Santa Fe, New Mexico. And no matter how many times I’ve tried to get Photomerge to blend these images, it always creates an alignment glitch at the top of the locomotive, just above the windshield. In this section of the article, we’ll create the initial panorama—glitch and all—and then explore a few different ways to try and fix the problem.

Click here for the rest of the tutorial

ADD ANOTHER DIMENSION TO FLASH

Some designers have a background in 3D modeling. I don’t. Still, clients expect me to make their logos spin and dance in 3D space. As much as I’d love to learn how to use Maya or 3ds Max, I don’t have the time or resources to do so.

Thank goodness for Swift 3D 6. It’s a 3D application made specifically for Flash designers. It allows them to draw simple shapes, type text, or import AI/EPS files and extrude them. You can then color and shade the model and animate it using a Flash-like Timeline. Swift 3D ships with preset animations, such as spins and bounces, that you can apply via drag-and-drop. It also comes with a large styles library, so if you want your object to look like glass or chrome, you don’t have to create that look from scratch. You can render out your model in a variety of styles, including photorealism and various cartoonish looks.

Once you import your project into Flash, you see it as a series of layers on the Timeline. Each aspect of the 3D data (reflections, colors, shadows, etc.) is on its own layer, so you have independent control of all the parts.

Advanced users will enjoy Swift 3D’s ability to import industry-standard 3DS and DFX formats. Swift 3D also includes polygon tools for advanced modeling. Developers will enjoy the program’s ability to export models and Papervision3D scenes.

With Swift 3D, I’m able to tell clients, “Yes, I can!”—Marcus Geduld

Company: Electric Rain
Price: $129
Web: www.erain.com
Rating: 4

Hot: Huge time saver; bargain: 25 effects for $129
Not: Mac only; lack of built-in image ordering